<template>
  <div class="box">
    <hcCard title="数据库连接配置">
      <el-form class="b-form">
        <el-form-item label="连接地址">
          <el-input
            placeholder="请输入连接地址"
            v-model="bform.address"
          ></el-input>
        </el-form-item>
        <div class="btns">
          <el-button type="primary">保 存</el-button>
        </div>
      </el-form>
    </hcCard>
    <hcCard title="通讯配置">
      <el-form class="b-form">
        <el-form-item label="通讯地址">
          <el-input
            placeholder="请输入连接地址"
            v-model="mform.address"
          ></el-input>
        </el-form-item>
        <el-form-item label="连接参数">
          <el-input placeholder="连接参数" v-model="mform.params"></el-input>
        </el-form-item>
        <div class="btns">
          <el-button type="primary">保 存</el-button>
        </div>
      </el-form>
    </hcCard>
    <hcCard title="工厂配置">
      <el-form class="b-form">
        <el-form-item label="工厂代码">
          <el-input placeholder="工厂代码" v-model="fform.code"></el-input>
        </el-form-item>
        <el-form-item label="设备编码">
          <el-input placeholder="连接参数" v-model="fform.num"></el-input>
        </el-form-item>
        <div class="btns">
          <el-button type="primary">保 存</el-button>
        </div>
      </el-form>
    </hcCard>
  </div>
</template>
<script setup>
import { reactive, onMounted } from "vue";

let bform = reactive({
  address: "",
});

let mform = reactive({
  address: "",
  params: "",
});

let fform = reactive({
  code: "",
  num: "",
});
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  // align-items: center;
  //background-color: #fff;

  .b-form {
    padding: 20px 10px;
    .btns {
      text-align: center;
    }
  }
}
</style>
